import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'
import xx from './components/images/avatar.png'

import { feachFoodList } from './store/modules/takeaway'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'


import './App.scss'
import { useEffect } from 'react'


//数据渲染
// const foodsList = ''  
const App = () => {

  //更改数据状态
  const dispatch  = useDispatch()
  //钩子函数
  // useEffect(() => {
  //   dispatch(feachFoodList())
  // },[dispatch])

  useEffect(() => {
    dispatch(feachFoodList())
  },[])

  //获取数据 数据渲染
  const { foodsList,activeIndex } = useSelector( state => state.foods)


  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu/>

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item,index) => {
                return (
                  activeIndex == index && <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App
